<template>
  <div class="tpl45-head">
    <div id="mob62" class="search_goods moduleSearchPadding mob62">
      <a @click="JumpName('item-class-list')" class="ico_menu"><i></i></a>
      <div class="search_form" >
        <div class="formitem">
          <button type="submit" class="j-search-button btn_sele" @click="searchList"></button>
          <input type="text" name="title" placeholder="搜索商品" v-model="keyword" @confirm="searchList"/>
        </div>
      </div>
      <a @click="JumpName('member')" class="ico_user"><i></i></a>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object
      }
    },
    data() {
      return {
        imgadvWxH: '0',
        showIndicators: true,
        autoplay: true,
        keyword: ''
      }
    },
    methods: {
      // TODO 小程序跳转
      openLink(link) {
          openPage(link)
      },
      // TODO 小程序swiper获取图片高度
      onImageLoad(event){
        const imgHeight=event.detail.height
        if(imgHeight>parseFloat(this.imgadvWxH)){
          this.imgadvWxH=imgHeight+'px'
        }
      },
      /**
       * 链接跳转
       */
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      },
      searchList() {
        this.$JumpName(this, 'item-list', { title: this.keyword })
      },
      handleScroll() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
        var ThisOpicty = scrollTop / 400
        var rgba = 'rgba(0,0,0,0)'
        if (scrollTop >= 200) {
          rgba = '#fe9d55'
        } else {
          rgba = `rgba(0,0,0,${ThisOpicty})`
        }
        if (document.getElementById('mob62')) document.getElementById('mob62').style.background = rgba
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll, false) // 移除监听
    }
  })
</script>

<style lang="scss">
  .tpl45-head{
    .search_goods{
      z-index: 2;
      text-align: center;
      // background: #fff;
      padding: 10px 0 0;
      left: 0;
      width: 100%;
      &>a{
        display: inline-block;
        *display:inline;
        *zoom:1;
        text-align: center;
        color: #fff;
        padding:8px;
        i{
          display: block;
          height: 56px;
          width:48px;
          background-repeat:no-repeat;
          background-position:center;
          background-size:contain;
        }
        &.ico_menu{
          // padding-right: 3.125%;
          i{
            width:40px;
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl45/62_menu.png);
          }
        }
        &.ico_user{
          // padding-left: 3.125%;
          i{
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl45/62_user.png);
          }
        }
      }
      .search_form{
        display: inline-block;
        background: #f6f6f6;
        vertical-align: top;
        border-radius: 10px;
        padding: 4px 0;
        width: 73%;
        .formitem {
          display: flex;
          align-items: center;
        }
        .btn_sele{
          width: 40px;
          height: 40px;
          border: none;
          background-image: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl45/62_select.png);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 100% 100%;
          margin: 8px 30px 8px 16px;
          display: inline-block;
          background-color: transparent;
        }
        input{
          width: 80%;
          height: 56px;
          line-height: 56px;
          text-indent: 8px;
          border: none;
          background: transparent;
          margin-left: -16px;
        }
      }
    
    }
  }
</style>
